<template>
  <div>
    <el-header>
      <div id="headCheck">
        <!-- 下拉选择学期 -->
        <span>学期：</span>
        <el-select
            class="term-select"
            @change="handleTermsChange"
            v-model="termValue"
            placeholder="请选择学期"
        >
          <el-option v-for="(item,index) in termData" :key="index" :value="item"></el-option>
        </el-select>
        <!-- 下拉选择学院 -->
        <span style="margin-left: 10px">开课学院：</span>
        <el-select
            class="college-select"
            @change="handleCollegesChange"
            v-model="collegeValue"
            placeholder="请选择学院"
        >
          <el-option v-for="(item,index) in collegeData" :key="index" :value="item"></el-option>
        </el-select>
        <span style="margin-left: 10px">课程名：</span>
        <el-input
            placeholder="请输入内容"
            v-model="inputCourse"
            clearable
            style="width: 150px">
        </el-input>
        <el-button type="warning" round @click="searchCourse" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="addCoursePlan">手动排课</el-button>
      </div>
    </el-header>

    <el-main>

    </el-main>

    <el-footer>
      <!-- 上一页，当前页，下一页 -->
      <div class="footer-button">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "CourseTaskList",
  data() {
    return {
      total : 10,
      page: 10,
      pageSize: 10,
    }
  },
  mounted() {
  },
  methods: {
    handleSizeChange(v) {
      this.pageSize = v;
      //todo
    },
    handleCurrentChange(v) {
      this.page = v;
      //todo
    }
  }
}
</script>